
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <el-input type="text" disabled v-model="current.type" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">选择标识</div>
      <div class="w-3/4">
        <el-input type="text" placeholder="用于$('')查询"  v-model.trim="current.selector" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签位置</div>
      <div class="w-3/4">
        <el-radio-group v-model="current.options.labelPosition">
          <el-radio-button label="left">left</el-radio-button>
          <el-radio-button label="top">top</el-radio-button>
          <el-radio-button label="right">right</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签宽度</div>
      <div class="w-3/4">
        <el-input-number
          v-model.number="current.options.labelWidth"
          :min="1"
          :max="200"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">尺寸控制</div>
      <div class="w-3/4">
        <el-radio-group v-model="current.options.size">
          <el-radio-button label="large">large</el-radio-button>
          <el-radio-button label="default">default</el-radio-button>
          <el-radio-button label="small">small</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <el-input type="text" v-model="current.describe" />
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { Component } from "@/components/low-code/core/";
import { defineComponent, reactive, computed } from "vue";

export default defineComponent({
  name: "cardSetting",
  props: ["current"],
  setup(props) {
    const component = reactive<Component>(props.current);
    let lowCode = component.getLowCodeInstance();

    return { lowCode };
  },
});
</script>

<style  scoped>
</style>
